<template>
  <div class="gallery-selector-container flex">
    <div
      class="gallery-selector"
      :style="{ width: imageWidth, height: imageHeight, fontSize: fontSize }"
      @click="galleryVisiable = true"
    >
      <img v-if="imageSrc" class="gallery-img" :src="imageSrc" />
      <a-icon v-else type="plus" />
    </div>
    <Base-Gallery
      v-model="galleryVisiable"
      :tab="tabIndex"
      @select="selectHandle"
    />
  </div>
</template>

<script>
export default {
  name: 'GallerySelector',
  model: {
    prop: 'imageSrc',
    event: 'change'
  },
  props: {
    // 选择tab值
    tabIndex: {
      type: Number,
      default: 5
    },
    // 图片地址
    imageSrc: {
      type: String,
      default: ''
    },
    // 图片宽度
    imageWidth: {
      type: String,
      default: '104px'
    },
    // 图片高度
    imageHeight: {
      type: String,
      default: '104px'
    },
    fontSize: {
      type: String,
      default: '40px'
    }
  },
  data() {
    return {
      galleryVisiable: false
    }
  },
  methods: {
    selectHandle(imageSrc) {
      // console.log(imageSrc)
      this.$emit('change', imageSrc)
    }
  }
}
</script>

<style lang="less" scoped>
.gallery-selector {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 1px dotted #d9d9d9;
  background-color: #fafafa;
  color: #999999;
  padding: 5px;
  overflow: hidden;
  .gallery-img {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 0;
    margin: 0;
  }
}
</style>
